<template>
  <div>
    <div class="login_wrap">
      <div class="login_left">
        <img src="../../assets/common/login_back.png" alt="">
      </div>
      <div class="login_right">
        <div class="login_info">
          <h1>登录</h1>
          <el-form ref="myloginForm" :model="loginForm" :rules="rules">
            <el-form-item prop="mobile">
              <el-input v-model="loginForm.mobile" placeholder="输入用户名">
                <template slot="prepend">
                  <i class="el-icon-user-solid" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" show-password placeholder="输入密码">
                <template slot="prepend">
                  <i class="el-icon-s-goods" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="loginForm.isAgree" />
              <a href="#">用户平台使用协议</a>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="toLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
  name: 'VueAdminTemplateIndex',

  data() {
    return {
      loginForm: { // 登录接口需要的数据
        mobile: '13800000002',
        password: 'hm#qd@23!',
        isAgree: false
      },
      rules: { // 给每个表单项增加 验证规则
        mobile: [{
          pattern: /^1[3|5|6|7|8|9]\d{9}$/,
          message: '手机号不符合规则',
          trigger: 'blur'
        }],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' },
          { min: 2, max: 16, message: '密码是2到16之间', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {

  },

  methods: {
    toLogin() { // 调用登录接口方法
      //  调用表单组件自带的验证方法validate
      this.$refs.myloginForm.validate((vali) => {
        // vali --所有表单的项通过后  返回true  如果有一项不通过返回false
        console.log(vali)
        if (vali) {
          // 表单通过后 在调用接口
          if (this.loginForm.isAgree) {
            loginApi(this.loginForm).then((res) => {
              console.log(res, '-----------')// res就是返回的token
              // 调用vuex中的分模块中的设置token 方法
              this.$store.commit('user/SET_TOKEN', res)
              // 调用js-cookie 插件的setToken方法 来存储token
              setToken(res)
              // 登录成功
              this.$message.success('登录成功')
              // 成功后 跳转主页
              this.$router.push({ name: 'Dashboard' })
            })
          } else {
            this.$message.error('请先同意协议')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .login_wrap{
      display:flex;
      .login_left{
        width:60vw;
        img{
          width:100%;
          height:100vh;
        }
      }
      .login_right{
             width:40vw;
             margin-left:40px;
               height:100vh;
               display:flex;
               justify-content:center;
               align-items:center;
            .login_info{
                width:400px;
                height:380px;
                .el-button{
                  width:100%;
                }
                a{
                  margin-left:15px;
                }
                i{
                  font-size:20px;
                }

            }
      }
    }
  </style>
